<template>
	
	<view class="user">
		<!-- 头部 -->
		<!-- <u-navbar back-text="" title="往约到家" :background="background" title-color='#FFF' back-icon-color='#FFF' style='border-bottom: none;'></u-navbar> -->
	<!-- 	<view class="box_title">
			<text class="nav_title">
				<u-icon  style="position: absolute;left: 80%;" name="setting-fill"  color="#fff"  size="45"></u-icon>
			</text>
		</view> -->
		
		
		<view class="user-wrap" style="margin-top:0;">
			
			<!-- <view class="setting" style="background:linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63)) ;width: 100%;">
				<view style="position: relative;left: 10%;">
					<u-icon  style="" name="bell-fill"  color="#fff"  size="45"></u-icon>
				</view>
				<view  style="position: relative;left: 80%;">
					<u-icon  style="" name="setting-fill"  color="#fff"  size="45"></u-icon>
				</view>
			</view> -->
			<u-icon  style="position: relative;left: -40%;top: -30%;" name="bell-fill"  color="#fff"  size="45"  @click='goinfo'></u-icon>
			<u-icon  style="position: relative;left: 40%;top: -30%;" name="setting-fill"  color="#fff"  size="45" @click='logout'></u-icon>
			
			<view class="setting iconfont icon31shezhi"></view>
			<view class="info">
				
				<image class="avatar" mode="aspectFill" :src="userInfo.headPicUrl"></image>
				<view class="nickname">{{ userInfo.nickName }}</view>
				
			</view>
			<!-- <view class="wallet" style="position: absolute;top: 180rpx;left: 200rpx;color: #FFFFFF;">
				<text style="">充值金额：</text>
				<text  style="">800.00</text>
			</view> -->
		</view>
		<view class="" style="width: 95%;margin-left: 20rpx;margin-bottom: 90rpx;margin-top:-80rpx;">
			<!-- <u-icon name='integral-fill'></u-icon> -->
			<u-cell-group>
					<u-cell-item icon="integral-fill" icon-size='30rpx'  style='border-radius: 25rpx;' title="充值金额" value="800.00" :arrow="false"></u-cell-item>
					
				</u-cell-group>
		</view>

		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status-wrap">
			
				<view class="cell">
					<view class="cell-left">
						<image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image>
						<view class="cell-text">全部订单</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>

		
				<view class="status-list">
					<view class="status-item" hover-class="btn-hover" v-for="(item, index) in orderStatusList" :key="index" @click="toOrder(index)">
						<!-- <view  :class="item.icon"></view> -->
						<u-icon :name="item.icon" color="#00b7ee" size="40"></u-icon>
						<view class="item-text">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 滑动导航 -->
		<view style="border-radius: 20rpx; overflow: hidden; margin: 0 20rpx;">
			<com-nav :list="list" :col="4" ></com-nav>
		</view>

		<!-- 用户功能 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in userList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text" @click="userFun(item.path,item.title)">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>
		<!-- 平台及用户协议 -->

	<view class="com-item">
				<view class="com-wrap">
					<view class="cell" v-for="(item, index) in platformList" :key="index">
						<view class="cell-left">
							<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
							<view class="cell-text" @click="userFun(item.path,item.title)">{{ item.title }}</view>
						</view>
						<view class="iconfont iconmore1"></view>
					</view>
				</view>
			</view>



		<!-- 用户服务 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in serverList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text" @click="userFun(item.path,item.title)">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>
		
		<!-- 关于我们 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in aboutList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text" @click="userFun(item.path,item.title)">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>
		
	</view>
	
	
	
</template>

<script>
import comNav from '@/components/com-nav.vue'
export default {
	components: {
		comNav
	},
	data() {
		return {
			background:{
				backgroundColor: '#19BE6B',
				backgroundSize: 'cover',
				backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))',
				
				
			},
			userInfo: {
				headPicUrl: '/static/images/user/avatar.jpg',
				nickName: '史蒂芬.林'
			},
			orderStatusList: [
				{ name: '已下单', icon: 'bag-fill', status: 10 },
				{ name: '进行中', icon: 'car-fill', status: 30 },
				{ name: '待评价', icon: 'more-circle-fill', status: 40 },
				{ name: '已取消', icon: 'close-circle-fill', status: 50 },
				{ name: '已完成', icon: 'checkmark-circle-fill', status: 55 }
			],
			currentIndex: 0,
			list: [
				{
					icon: '/static/images/user/class-01.png',
					title: '我的优惠券',
					path:'coupons'
				},
				{
					icon: '/static/images/user/class-02.png',
					title: '消息',
					path:'alerts'
				},
				{
					icon: '/static/images/user/class-03.png',
					title: '我的收藏',
					path:'collection'
				},
				{
					icon: '/static/images/user/class-04.png',
					title: '邀请有奖',
					path:'invite'
				}
			],
			userList: [
				{
					title: '在线充值',
					icon: '/static/images/user/icon-address.png',
					path: 'charge'
				},
				{
					title: '申请退款',
					icon: '/static/images/user/icon-collect.png',
					path: 'apply'
				},
				// {
				// 	title: '我的足迹',
				// 	icon: '/static/images/user/icon-foot.png',
				// 	path: 'browse-list'
				// }
			],
			platformList: [
				{
					title: '平台声明',
					icon: '/static/images/user/icon-kefu.png',
					path: 'platform'
				},
				{
					title: '用户协议',
					icon: '/static/images/user/icon-help.png',
					path: 'userAgreement'
				},
				{
					title: '隐私协议',
					icon: '/static/images/user/class-01.png',
					path: 'privacyAgreement'
				}
				
			],
			serverList: [
				
				{
					title: '常见问题',
					icon: '/static/images/user/class-02.png',
					path: 'problem'
				},
				// {
				// 	title: '客服中心',
				// 	icon: '/static/images/user/icon-kefu.png',
				// 	path: 'kefu'
				// },
				{
					title: '用户反馈',
					icon: '/static/images/user/class-03.png',
					path: 'feedback'
				},
				
			],
			aboutList: [
				{
					title: '技师招聘',
					icon: '/static/images/user/class-04.png',
					path: 'recruiting'
				},
				{
					title: '版本更新',
					icon: '/static/images/user/icon-about.png',
					path: 'version'
				},
				{
					title: '关于我们',
					icon: '/static/images/user/icon-kefu.png',
					path: 'aboutUs'
				}
				
			],
		};
	},
	methods:{
		toOrder(id){
			console.log(id);
			// uni.switchTab({
			// 	url:'/pages/orderList/index',
			// 	params:{
			// 		status:index
			// 	}
			// })
			
			uni.switchTab({
				url: '/pages/orderList/index',
				params: {
					id: id
				}
			})
		},
		logout(){
			this.$u.route({
				url: '/pages/logout/index',
				params: {
					name: '退出'
				}
			})
		},
		userFun(path,title){
			//console.log(path);
			this.$u.route({
				url: '/pages/'+path+'/index',
				params: {
					name: title
				}
			})
		},
		goinfo(){
			this.$u.route({
				url: '/pages/alerts/index',
				// params: {
				// 	name: title
				// }
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
// .btn-hover {
// 	background: #f2f2f2 !important;
// }
.box_title{
	width: 100%;
	//margin-top: 100rpx;
}
.nav_title{
	// background: linear-gradient(70deg, rgb(28, 187, 180), rgb(141, 198, 63));
	// //background:#FFFFFF;
	// width: 100%;
	position: absolute;
	top: 90rpx;
	left: 80%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #FFFFFF;
	// font-size: 30rpx;
	// margin-bottom: 50rpx;
}
.user {
	
	.user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vw;
		padding: 30rpx;
		z-index: 9;
		border-radius: 0 0 20% 20%;
		
		// background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
		background: linear-gradient(70deg, rgb(28, 187, 180), rgb(141, 198, 63));
		background-size: cover;
		.setting {
			color: #fff;
			position: absolute;
			top: 70rpx;
			left: 70rpx;
			font-size: 50rpx;
		}
		.info {
			position: absolute;
			// top: 100rpx;
			// left: 8%;
			text-align: center;
			.avatar {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}
			.nickname {
				color: #fff;
				font-size: 28rpx;
				//float: left;
				//top: 70rpx;
				// margin-top: -150rpx;
				// margin-left: 0rpx;
				//margin-left: 100rpx;
			}
		}
	}
	.order-status {
		padding: 0 20rpx;
		margin-top: -10vw;
		.status-wrap {
			border-radius: 25rpx;
			overflow: hidden;
			.status-list {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background: #fff;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.status-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.item-icon {
						line-height: 1;
						font-size: 65rpx;
						color: #bbb;
					}
					.item-text {
						font-size: 28rpx;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
	.com-item {
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;
		.com-wrap {
			border-radius: 25rpx;
			overflow: hidden;
		}
	}
	.cell {
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #f8f8f8;
		&:active {
			background: #f2f2f2;
		}
		&:last-child {
			border-bottom: none !important;
		}
		.cell-left {
			display: flex;
			align-items: center;
			.cell-icon {
				width: 50rpx;
				height: 50rpx;
			}
			.cell-text {
				color: #666;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.iconfont {
			font-size: 40rpx;
			color: #999;
		}
	}
}
</style>
